<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: 侯瑜
 * @LastEditTime: 2022-01-10 19:49:14
-->
<template>
  <!--1. 容器 -->
  <div ref="Right2_container" id="container" style="height: 95%"></div>
</template>
<script>

import { Area } from '@antv/g2plot';
export default{
  data(){
    return{
      dataArr:[
               {  "Date": "0-2",  "scales": 76  },
               {  "Date": "2-4",  "scales": 129  },
               {  "Date": "4-6",  "scales": 379  },
               {  "Date": "6-8",  "scales": 420  },
               {  "Date": "8-10",  "scales": 115  },
               {  "Date": "10+",  "scales": 46  },
               ]
    }
  },
  created(){

  },
  mounted(){
    this.initChart()
  },
  methods:{
    initChart(){

      
      const area = new Area(this.$refs.Right2_container , {
            data:this.dataArr,
            xField: 'Date',
      yField: 'scales',
      xAxis: {
        range: [0, 1],
        tickCount: 5,
      },
      areaStyle: () => {
        return {
          fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
        };
      },
    });

     area.render();
    }
  }

}
</script>
<style scoped>

</style>